<template>
  <div class="transparent-btn flex-row-center" v-bind="$listeners"
       @mouseenter="hover=true"
       @mouseleave="hover=false"
       :style="{borderColor:computedColor,color: computedColor }">
    <slot>

    </slot>
  </div>
</template>

<script>
export default {
  name: "TransButton",
  props:{
    color:{
      type:String,
      default:"white"
    },
    activeColor:{
      type:String,
      default:"black"
    }
  },
  data() {
    return {
      hover:false,
    }
  },
  computed:{
    computedColor(){
      return this.hover?this.activeColor:this.color
    }
  },
  methods: {}
}
</script>

<style scoped lang="less">
  .transparent-btn{
    padding: 3px 5px;
    background-color: transparent;
    border: 2px solid white;
    color: white;
    font-weight: 550;
    min-width: 60px;
    min-height: 30px;
    transition: all 0.5s;
    cursor: pointer;
    caret-color: transparent;
  }
</style>